

import React,{useEffect,useState} from 'react';

// useEffect 
//  作用用来模拟生命周期的

const Father = () => {
    let [userinfo,setUserinfo] = useState({name:"王婉婉",age:18})
    let [nameArr,setNamearr] = useState(['王贺','李旺源'])
    // 01: 第一种方式
    // 该生命周期特点: 初始化执行,数据更新也执行, 对标 render 生命周期
    // useEffect(()=>{
    //     console.log(100);
    // })

    //02: 第二种方式
    // 初始化执行一次,数据更新时,先执行return 返回的箭头函数,再执行初始的内容
    // useEffect(() => {
    //     console.log(100);
    //     const timer = setInterval(() => {
    //         console.log('定时器');
    //     }, 1000);
    //     return () => {
    //         console.log(200);
    //         clearInterval(timer)
    //     };
    // });

    //03: 第三种方式
    // 参数1: 还是箭头函数
    // 参数2: 为一个数组,该数组可以存放该函数组件中要监听的变量名
    // 特点: 当参数2 为空数组的时候,那么不监听任何变量,所以只有初始化的时候执行,return 可以省略
    // 对标 constructor  生命周期
    // useEffect(() => {
    //    console.log(100);
    //     return () => {
    //       console.log(200); 
    //     };
    // }, []);
 
    // 04:第四种方式
    // 参数2: 当监听的数据发生变化,执行return 返回的函数,否则不执行
    // 对标: 对标有条件的componentDidUpdate
    useEffect(() => {
       console.log(100)
        return () => {
            console.log(200);
        };
    }, [userinfo]);



    const editUser = ()=>{
        setUserinfo({
            ...userinfo,
            age:userinfo.age+1
        })
    }

    const addUser= ()=>{
        setNamearr(()=>{
            return [...nameArr,'王迪']
        })
    }
    return (
        <div>
            <p>{userinfo.name} -- {userinfo.age}</p>
            <p><button onClick={editUser}>age++</button></p>
            <ul>
              {
                    nameArr.map((item,index)=><li key={index}>{item}</li>)
              }  
            </ul>
              <p><button onClick={addUser}>添加人员</button></p>
        </div>
    );
}

export default Father;
